<template>
  <q-footer class="row my_footer">
    <!-- <div class="row full-width justify-center q-mb-lg">友情链接</div> -->
    <!--    底部开始-->
    <div class="justify-center flex my_footer_con">
      <div class="f_container flex row no-wrap">
        <div class="footer_item column full-height f_margin col">
          <div class="f_title">
          </div>
          <div class="f_content column">
          </div>
        </div>
        <div class="footer_item column full-height f_margin col">
          <div class="f_title">
            {{$t('标准库')}}
          </div>
          <div class="f_content column">
          </div>
        </div>
        <div class="footer_item column full-height f_margin col">
          <div class="f_title">
            {{$t('资源库')}}
          </div>
          <div class="f_content column">
            <span
              class="cursor-pointer"
              @click="itemClicked('dataset', item)"
              :key="item" v-for="item in ['基础资源库','行业数据库','专项解决方案']">
              {{ $t(item) }}
            </span>
          </div>
        </div>
        <div class="footer_item column full-height f_margin col">
          <div class="f_title">
            {{$t('工具库')}}
          </div>
          <div class="f_content column">
            <span
              class="cursor-pointer"
              @click="itemClicked('tools', item)"
               :key="item" v-for="item in ['在线检测工具']">
              {{ $t(item) }}
            </span>
          </div>
        </div>
        <!-- <div class="footer_item column full-height f_margin col">
          <div class="f_title">
            {{$t('人才库')}}
          </div>
          <div class="f_content column">
            <span
              class="cursor-pointer"
              @click="itemClicked('talent', item)"
               :key="item" v-for="item in ['科学家','研究员','标准化人才','工程技术人才','产业咨询人才','企业管理人才']">
              {{ $t(item) }}
            </span>
          </div>
        </div> -->
        <div class="footer_item column full-height f_margin col">
          <div class="f_title">
            {{$t('标准化组织')}}
          </div>
          <div class="f_content column">
          </div>
        </div>
        <div class="qr_code footer_item column full-height items-center justify-center col">
          <q-img
            :src="qrcode.code | serverImage"
            spinner-color="white"
            width="90px"
            height="90px"
            clickable
            :class="{'cursor-pointer': !!qrcode && !!qrcode.url}"
            @click="qrcodeClicked(qrcode)"
          />
          <div class="f_content qr_text q-mt-xs">{{$t(qrcode.d || '微信公众号')}}</div>

          <!-- <div class="f_content qr_text q-mt-lg text-left full-width"
            style="font-size: 12px;margin-top:36px;"
            >技术支持：</div>
          <div class="f_content text-left full-width q-mt-none q-pt-none"
            style="font-size: 12px;margin-top:0;line-height:12px;">北京息信科技有限公司</div> -->
        </div>
      </div>
    </div>
    <div class="full-width bottomed flex justify-between items-center">
      <div class="content flex justify-between items-center no-wrap">
        <div class="le flex q-gutter-x-md no-wrap">
          <div class="btn">
            <q-btn flat to="/about">{{$t('关于我们')}}</q-btn>
          </div>
          <q-separator vertical class="q-my-sm" style="background-color: #5a667b;"></q-separator>
          <div class="btn">
            <q-btn flat to="/qa">{{$t('常见问题')}}</q-btn>
          </div>
          <q-separator vertical class="q-my-sm" style="background-color: #5a667b;"></q-separator>
          <div class="btn">
            <q-btn flat to="/sitemap">{{$t('站点地图')}}</q-btn>
          </div>
        </div>
        <q-space></q-space>
        <div class="ri row justify-center items-center q-gutter-x-md">
          <div>人工智能互联互通开源评测平台版权所有</div>
          <div>© 2022-{{(new Date()).getFullYear()}}</div>
          <div class="cursor-pointer" v-if="ICP" @click="toICP">{{ICP}}</div>
          <div class="row items-center cursor-pointer"
            v-if="安备"
            clickable @click="toBeian">
            <q-img src="images/portal/ghs.png"
              class="q-mr-xs"
              style="height: 16px; width: 16px;">
            </q-img>京公网安备{{安备}}号</div>
        </div>
      </div>
    </div>
    <!--    底部结束-->
  </q-footer>
</template>

<script>
export default {
  name: 'WebFooter',
  props: {
    info: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      qrcode: {
        code: '',
        d: '',
      },
      ICP: '',
      安备: '',
    };
  },
  created() {
    // footer info
    this.getRequest('portal/footer').then((d) => {
      const data = (d && d.data) || {};

      if (data && data.ICP) {
        this.ICP = data.ICP;
      }

      if (data && data.安备) {
        this.安备 = data.安备;
      }
    });

    // qrcode
    this.getRequest('portal/qrcode').then((d) => {
      const data = (d && d.data) || {};

      let qr = (data.qrcodes && data.qrcodes[0]) || data.qrcodes;
      qr = qr || {};

      this.qrcode = {
        code: qr.id,
        d: qr.d,
        url: qr.url,
      };
    });
  },
  watch: {
  },
  methods: {
    itemClicked(t) {
      if (this.$route.fullPath !== `/${t}`) {
        this.$router.push(`/${t}`);
      }
    },
    toICP() {
      window.open('https://beian.miit.gov.cn');
    },
    toBeian() {
      window.open(`http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${this.安备 || ''}`);
    },
    qrcodeClicked(q) {
      if (!q || !q.url) return;

      window.open(q.url);
    },
  },
};
</script>

<style lang="scss" scoped>
.my_footer{
  .f_container {
    width: 1200px;
    margin: 0 auto;
  }
  margin-top: 40px;
  //height: 426px;
  background-color: #112039;
  padding-top: 40px;
  .my_footer_con{
    width: 100%;
  }
  .footer_item{
    background-color: #122442;
    padding: 24px 30px 12px 30px;
    min-width: 164px;
    min-height: 300px;
    .f_title{
      font-size: 20px;
      color: #ffffff;
      height: 30px;
    }
    &.f_margin{
      margin-right: 5px;
    }
    .f_content{
      margin-top: 8px;
      font-size: 14px;
      color: #6e7787;
      line-height: 38px;

      span:hover {
        color: $primary;
      }
    }
  }
  .qr_code{
    background-color: #122442;
    padding: 20px;
    height: 275px;
  }
  .bottomed{
    background-color: #122442;
    margin-top: 40px;
    .content{
      width: 1200px;
      height: 48px;;
      margin:0 auto;
      // padding: 19px 0;
      color: #5a667b;
      font-size: 13px;
      // .le{
      //   .btn{
      //     // padding-right: 8px;
      //     // border-right: 1px solid #5a667b;
      //     // &:last-child{
      //     //   border-right: none;
      //     // }
      //   }
      // }
      .ri{
        white-space: pre-wrap
      }
    }
  }
}
</style>
